// 变更人员
<template>
  <f7-page class="hntList common-page has-bottom-btns" ptr @ptr:refresh="refresh" infinite :infinite-distance="50"
    :infinite-preloader="true" @infinite="infinite">
    <f7-navbar>
      <f7-nav-left>
        <f7-link back icon-material="chevron_left" force></f7-link>
      </f7-nav-left>
      <f7-nav-title>变更人员</f7-nav-title>
      <f7-nav-right> </f7-nav-right>
    </f7-navbar>
    <div class="search-box">
      <van-search v-model="search.searchContent" @search="searchQuery" @clear="reset" shape="round"
        background="transparent" placeholder="请输入人员/联系方式" />
    </div>
    <van-radio-group v-model="radio" direction="horizontal" v-if="query.data.length > 0">
      <f7-list media-list class="search-list">
        <li v-for="(item, index) in query.data" :key="index">
          <van-radio :name="item.userId">
            <div class="person-content">
              <div class="left-box" v-if="!item.personPhotoAttachId">
                待采集
              </div>
              <img class="left-box" v-else :src="$util.getImgSrc(item.personPhotoAttachId)" />
              <div class="right-box">
                <section>
                  <h4>{{ item.personName }}</h4>
                  <label class="tag tag-blue">已审核</label>
                </section>
                <span>安全考核证书(A证)</span>
                <span>证书有效期：{{ item.personMobile }}</span>
              </div>
            </div>
          </van-radio>
        </li>
      </f7-list>
    </van-radio-group>
    <v-empty v-else description="暂无数据" style="margin-top: 40px;" />
    <f7-toolbar position="bottom" no-shadow class="fff">
      <f7-button fill class="submit-btn plain-btn" @click="onCancle">取消</f7-button>
      <f7-button fill class="submit-btn" @click="onConfirm">确定</f7-button>
    </f7-toolbar>
  </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller";
export default class instance extends controller {
  onBeforeInit() {
    this.urls = {
      model: ["/ent/entBase/getEntity", "/ent/entPersonBase/getListModel"],
      query: "/ent/entPersonBase/query",
    };
  }

  onInit() { }
  onBeforeQuery(type, conditions, params) {
    if (type === "list") {
      params.query.status = 1;
    }
  }
  onAfterQuery(type, isSuccess, result) {
    if (type == "list") {
      this.vm.total = result.recordsTotal;
    }
    return result;
  }
  mixin() {
    return {
      data() {
        return {
          total: 0,
          search: {
            searchContent: "",
          },
          query: {
            data: [],
          },
          radio: "",
        };
      },
      methods: {
        reset() {
          this.search.searchContent = "";
          this.searchQuery();
        },
        // 取消
        onCancle() { },
        // 确定
        onConfirm() {
          this.$f7.views.current.router.back({ force: false })
        }
      },
    };
  }
}
</script>

<style lang="less" scoped>
@import url('../../../../assets/css/commonPage.less');
@deep: ~'>>>';

@{deep}.page-content {
  background-color: #f4f6f9;
}

.hntList {

  .search-box {
    background-color: #f4f6f9;
    position: fixed;
    height: 54px;
    width: 100%;
    z-index: 99;
    box-sizing: border-box;

    @{deep}.van-search {
      .van-search__content {
        background: #fff;
      }
    }

    @{deep}.searchbar {
      flex: 1;
      font-size: 16px;
      height: 35px;
      border-radius: 35px;
      overflow: hidden;
      margin-left: 16px;

      input[type='search'] {
        font-size: 16px;
        padding-left: 50px;
      }
    }
  }

  .search-list {
    width: 100%;
    margin-top: 40px;

    @{deep} ul {
      background: none;

    }

    @{deep} .van-radio {
      margin: 10px 0;
      padding: 12px 15px;
      font-size: 13px;
      background: #ffffff;
      box-shadow: 0px 3px 8px 0px rgba(165, 201, 255, 0.1);
      border-radius: 8px;
      display: flex;
      align-items: center;

      .van-radio__label {
        flex: 1;
      }

      &:first-child {
        margin-top: 0;
      }

      .person-content {
        display: flex;

        .left-box {
          width: 70px;
          height: 70px;
          background: #f0f6ff;
          text-align: center;
          line-height: 70px;
          margin-right: 15px;
          letter-spacing: 1px;
          font-size: 14px;
        }

        .right-box {
          flex: 1;
          height: 70px;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;

          section {
            display: flex;
            align-items: center;

            label.tag.tag-blue {
              flex-shrink: 0;
            }

            h4 {
              margin: 0;
              padding: 0;
              margin-right: 10px;
              font-size: 16px;
              flex: 1;
            }
          }

          span {
            color: #b5b5b5;
          }
        }
      }
    }
  }
}
</style>
